<template>
  <template v-if="item.children && item.children.length">
    <q-expansion-item
      :icon="item.icon"
      :label="item.label"
      v-model="isActive"
      :header-class="{ 'text-primary': isActive }"
    >
      <MenuItem
        v-for="(child, childIndex) in item.children"
        :key="childIndex"
        :item="child"
        :level="level + 1"
      />
    </q-expansion-item>
  </template>
  <template v-else>
    <q-item
      clickable
      v-ripple
      :to="item.to"
      active-class="active-menu-item"
      :class="['q-pl-' + (level * 3 + 3)]"
    >
      <q-item-section avatar>
        <q-icon :name="item.icon" />
      </q-item-section>
      <q-item-section>
        {{ item.label }}
      </q-item-section>
    </q-item>
  </template>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  item: Object,
  level: Number,
})

const isActive = ref(props.item.defaultOpened || false)
</script>
